<template>
  <global-layout @dynamicRouterShow="dynamicRouterShow" style="display:flex;flex-direction: column;height: 100%;">
    <contextmenu :itemList="menuItemList" :visible.sync="menuVisible" @select="onMenuSelect" />
    <a-tabs
      @contextmenu.native="(e) => onContextmenu(e)"
      v-if="multipage"
      :active-key="activePage"
      class="tab-layout-tabs"
      style="height: 52px"
      :hide-add="true"
      type="editable-card"
      @change="changePage"
      @edit="editPage"
    >
      <a-tab-pane :id="page.fullPath" :key="page.fullPath" v-for="page in pageList">
        <span slot="tab" :pagekey="page.fullPath">
          {{ page.meta.title }}
          <!-- 根据tabImg是否等于page.fullPath来判断标签是否为激活状态，从而显示不用的圆角图片 -->
          <img
            v-if="tabImg == page.fullPath"
            :src="require('../../assets/' + $store.state.app.color + '.png')"
            class="tabImg"
          />
          <!-- $store.state.app.color为主题颜色，已在静态文件中将对应的圆角图片的名称更换为主题颜色 -->
          <img v-if="tabImg != page.fullPath" src="../../assets/tab2.png" class="tabImg" />
        </span>
      </a-tab-pane>
    </a-tabs>
    <!-- style="margin: 12px 12px 0" content外边距 -->
    <div  class="tablayout-content" style="flex:1;overflow-y: auto;height: 1;">
      <transition name="page-toggle">
        <keep-alive v-if="multipage">
          <router-view />
        </keep-alive>
        <router-view v-else />
      </transition>
    </div>
  </global-layout>
</template>

<script>
import GlobalLayout from '@/components/page/GlobalLayout'
import Contextmenu from '@/components/menu/Contextmenu'
import { mixin, mixinDevice } from '@/utils/mixin.js'

const indexKey = '/dashboard/analysis'

export default {
  name: 'TabLayout',
  components: {
    GlobalLayout,
    Contextmenu,
  },
  mixins: [mixin, mixinDevice],
  data() {
    return {
      tabImg: '',
      pageList: [],
      linkList: [],
      activePage: '',
      menuVisible: false,
      menuItemList: [
        { key: '1', icon: 'arrow-left', text: '关闭左侧' },
        { key: '2', icon: 'arrow-right', text: '关闭右侧' },
        { key: '3', icon: 'close', text: '关闭其它' },
      ],
    }
  },
  computed: {
    multipage() {
      //判断如果是手机模式，自动切换为单页面模式
      if (this.isMobile()) {
        return false
      } else {
        return this.$store.state.app.multipage
      }
    },
  },
  created() {
    if (this.$route.path != indexKey) {
      this.pageList.push({
        name: 'dashboard-analysis',
        path: indexKey,
        fullPath: indexKey,
        meta: {
          icon: 'dashboard',
          title: '首页',
        },
      })
      this.linkList.push(indexKey)
    }
    this.pageList.push(this.$route)
    this.linkList.push(this.$route.fullPath)
    this.activePage = this.$route.fullPath
    this.tabImg = this.$route.fullPath // 为tabImg设置为路由值，用于判断是否为激活状态
  },
  watch: {
    $route: function (newRoute) {
      this.activePage = newRoute.fullPath
      setTimeout(() => {
        this.tabImg = newRoute.fullPath // 延迟赋值，变相延迟修改圆角图片颜色，模拟切换时的动画差时
      }, 300)
      if (!this.multipage) {
        this.linkList = [newRoute.fullPath]
        this.pageList = [Object.assign({}, newRoute)]
      } else if (this.linkList.indexOf(newRoute.fullPath) < 0) {
        this.linkList.push(newRoute.fullPath)
        this.pageList.push(Object.assign({}, newRoute))
      } else if (this.linkList.indexOf(newRoute.fullPath) >= 0) {
        let oldIndex = this.linkList.indexOf(newRoute.fullPath)
        let oldPositionRoute = this.pageList[oldIndex]
        this.pageList.splice(oldIndex, 1, Object.assign({}, newRoute, { meta: oldPositionRoute.meta }))
      }
    },
    activePage: function (key) {
      let index = this.linkList.lastIndexOf(key)
      let waitRouter = this.pageList[index]
      this.$router.push(Object.assign({}, waitRouter))
      this.$nextTick(() => {
        // 循环后赋值对应的激活页的背景颜色
        var j = 0
        for (var i = 0; i < document.getElementsByClassName('ant-tabs-tab').length; i++) {
          j++
          document.getElementsByClassName('ant-tabs-tab')[i].style = ''
          if (j == document.getElementsByClassName('ant-tabs-tab').length) {
            document.getElementsByClassName(
              'ant-tabs-tab-active'
            )[0].style.backgroundColor = this.$store.state.app.color
          }
        }
      })
    },
    multipage: function (newVal) {
      if (!newVal) {
        this.linkList = [this.$route.fullPath]
        this.pageList = [this.$route]
      }
    },
    '$store.state.app.color'(val) {
      if (val) {
        this.$nextTick(() => {
          console.log(document.getElementsByClassName('ant-tabs-tab'))
          var j = 0
          for (var i = 0; i < document.getElementsByClassName('ant-tabs-tab').length; i++) {
            j++
            document.getElementsByClassName('ant-tabs-tab')[i].style = ''
            if (j == document.getElementsByClassName('ant-tabs-tab').length) {
              document.getElementsByClassName(
                'ant-tabs-tab-active'
              )[0].style.backgroundColor = this.$store.state.app.color
            }
          }
        })
      }
    },
  },
  mounted() {},
  methods: {
    changePage(key) {
      this.activePage = key
      setTimeout(() => {
        this.tabImg = key
      }, 300)
    },
    editPage(key, action) {
      this[action](key)
    },
    remove(key) {
      if (key == indexKey) {
        this.$message.warning('首页不能关闭!')
        return
      }
      if (this.pageList.length === 1) {
        this.$message.warning('这是最后一页，不能再关闭了啦')
        return
      }
      this.pageList = this.pageList.filter((item) => item.fullPath !== key)
      let index = this.linkList.indexOf(key)
      this.linkList = this.linkList.filter((item) => item !== key)
      index = index >= this.linkList.length ? this.linkList.length - 1 : index
      this.activePage = this.linkList[index]
    },
    onContextmenu(e) {
      const pagekey = this.getPageKey(e.target)
      if (pagekey !== null) {
        e.preventDefault()
        this.menuVisible = true
      }
    },
    getPageKey(target, depth) {
      depth = depth || 0
      if (depth > 2) {
        return null
      }
      let pageKey = target.getAttribute('pagekey')
      pageKey =
        pageKey || (target.previousElementSibling ? target.previousElementSibling.getAttribute('pagekey') : null)
      return pageKey || (target.firstElementChild ? this.getPageKey(target.firstElementChild, ++depth) : null)
    },
    onMenuSelect(key, target) {
      let pageKey = this.getPageKey(target)
      switch (key) {
        case '1':
          this.closeLeft(pageKey)
          break
        case '2':
          this.closeRight(pageKey)
          break
        case '3':
          this.closeOthers(pageKey)
          break
        default:
          break
      }
    },
    closeOthers(pageKey) {
      let index = this.linkList.indexOf(pageKey)
      if (pageKey == indexKey) {
        this.linkList = this.linkList.slice(index, index + 1)
        this.pageList = this.pageList.slice(index, index + 1)
        this.activePage = this.linkList[0]
      } else {
        let indexContent = this.pageList.slice(0, 1)[0]
        this.linkList = this.linkList.slice(index, index + 1)
        this.pageList = this.pageList.slice(index, index + 1)
        this.linkList.unshift(indexKey)
        this.pageList.unshift(indexContent)
        this.activePage = this.linkList[1]
      }
    },
    closeLeft(pageKey) {
      if (pageKey == indexKey) {
        return
      }
      let tempList = [...this.pageList]
      let indexContent = tempList.slice(0, 1)[0]
      let index = this.linkList.indexOf(pageKey)
      this.linkList = this.linkList.slice(index)
      this.pageList = this.pageList.slice(index)
      this.linkList.unshift(indexKey)
      this.pageList.unshift(indexContent)
      if (this.linkList.indexOf(this.activePage) < 0) {
        this.activePage = this.linkList[0]
      }
    },
    closeRight(pageKey) {
      let index = this.linkList.indexOf(pageKey)
      this.linkList = this.linkList.slice(0, index + 1)
      this.pageList = this.pageList.slice(0, index + 1)
      if (this.linkList.indexOf(this.activePage < 0)) {
        this.activePage = this.linkList[this.linkList.length - 1]
      }
    },
    //update-begin-author:taoyan date:20190430 for:动态路由title显示配置的菜单title而不是其对应路由的title
    dynamicRouterShow(key, title) {
      let keyIndex = this.linkList.indexOf(key)
      if (keyIndex >= 0) {
        let currRouter = this.pageList[keyIndex]
        let meta = Object.assign({}, currRouter.meta, { title: title })
        this.pageList.splice(keyIndex, 1, Object.assign({}, currRouter, { meta: meta }))
      }
    },
    //update-end-author:taoyan date:20190430 for:动态路由title显示配置的菜单title而不是其对应路由的title
  },
}
</script>

<style lang="scss">
/*
 * The following styles are auto-applied to elements with
 * transition="page-transition" when their visibility is toggled
 * by Vue.js.
 *
 * You can easily play with the page transition by editing
 * these styles.
 */

.page-transition-enter {
  opacity: 0;
}

.page-transition-leave-active {
  opacity: 0;
}

.page-transition-enter .page-transition-container,
.page-transition-leave-active .page-transition-container {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

/*美化弹出Tab样式*/
.ant-tabs-nav-container {
  margin-top: 4px;
}

/* 修改 ant-tabs 样式 */
.tab-layout-tabs.ant-tabs {
  border-bottom: 1px solid #ccc;
  border-left: 1px solid #ccc;
  background-color: white;
  padding: 0 20px;

  .ant-tabs-bar {
    margin: 4px 0 0;
    border: none;
  }
}
.ant-layout-content .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab {
  background-color: rgb(242, 242, 242);
}
.ant-tabs {
  &.ant-tabs-card .ant-tabs-tab {
    color: #000;
    animation: tabImg 0.7s;
    padding: 0 24px !important;
    background-color: rgb(242, 242, 242);
    margin-right: 13px !important;
    border-radius: 13px 18px 0 0 !important;

    div {
      text-align: center;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .tabImg {
      width: 13px;
      animation: tabImg 0.7s;
      position: absolute;
      height: 100%;
      bottom: -2px;
      right: -13px;
    }
    .ant-tabs-close-x {
      width: 12px !important;
      height: 12px !important;
      opacity: 0 !important;
      cursor: pointer !important;
      font-size: 12px !important;
      margin: 0 !important;
      position: absolute;
      top: 36%;
      right: 6px;
    }
    &:hover .ant-tabs-close-x {
      color: #000 !important;
      opacity: 1 !important;
    }
  }
  .ant-tabs-nav .ant-tabs-tab:hover {
    color: #000 !important;
  }
}

.ant-tabs.ant-tabs-card > .ant-tabs-bar {
  .ant-tabs-tab {
    border: none !important;
    border-bottom: 1px solid transparent !important;
  }
  // .ant-tabs-tab-active {
  //   // border-color: #1890ff !important;
  // }
}
@keyframes tabImg {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.ant-tabs.ant-tabs-card > .ant-tabs-bar {
  .ant-tabs-tab {
    border: none !important;
    border-bottom: 1px solid transparent !important;
  }
  .ant-tabs-tab-active {
    animation: tabImg 0.7s;
    color: #fff !important;
    // background-color: rgb(28, 99, 255) !important;
    // background-color: rgb(24, 144, 255) !important;
    &:hover .ant-tabs-close-x {
      color: #fff !important;
      opacity: 1 !important;
    }
  }
}

/*单独设置菜单栏整体风格*/
.ant-menu {
  color: #fff;
  //右侧箭头
  .ant-menu-submenu-vertical > .ant-menu-submenu-title .ant-menu-submenu-arrow:before,
  .ant-menu-submenu-vertical-left > .ant-menu-submenu-title .ant-menu-submenu-arrow:before,
  .ant-menu-submenu-vertical-right > .ant-menu-submenu-title .ant-menu-submenu-arrow:before,
  .ant-menu-submenu-inline > .ant-menu-submenu-title .ant-menu-submenu-arrow:before,
  .ant-menu-submenu-vertical > .ant-menu-submenu-title .ant-menu-submenu-arrow:after,
  .ant-menu-submenu-vertical-left > .ant-menu-submenu-title .ant-menu-submenu-arrow:after,
  .ant-menu-submenu-vertical-right > .ant-menu-submenu-title .ant-menu-submenu-arrow:after,
  .ant-menu-submenu-inline > .ant-menu-submenu-title .ant-menu-submenu-arrow:after {
    content: '';
    position: absolute;
    vertical-align: baseline;
    background: #fff;
    background-image: none;
    width: 6px;
    height: 1.5px;
    border-radius: 2px;
  }
  .ant-menu-submenu-inline > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow:after,
  .ant-menu-submenu-inline > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow:before {
    background: #fff;
  }
  //子项文字颜色
  .ant-menu-item > a {
    color: #fff;
  }
  .ant-menu-item > a:hover {
    color: #fff;
  }
  .ant-menu-item > a:before {
    background-color: transparent;
  }
  //侧边栏子项
  .ant-menu-submenu > .ant-menu {
    background: transparent;
    color: #fff;
    border-radius: 4px;
  }
  //新增下边界分割线border 和两边5px空白(新增样式）
  .ant-menu-submenu-inline:not(:last-child) {
    border-bottom: 1px solid #ffffff85;
  }
  .ant-menu-submenu-inline {
    margin: 0 5px;
  }
  //第一级菜单hover样式（新增样式）
  .ant-menu-submenu-title:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
  }
  //右侧原本有的3像素的边框
  .ant-menu-vertical .ant-menu-item:after,
  .ant-menu-vertical-left .ant-menu-item:after,
  .ant-menu-vertical-right .ant-menu-item:after,
  .ant-menu-inline .ant-menu-item:after {
    border-right: none !important;
  }
  .ant-menu-submenu-selected {
    color: #fff;
  }
  .ant-menu-item-selected {
    color: #1890ff;
  }
  .ant-menu-item-selected > a,
  .ant-menu-item-selected > a:hover {
    color: #1890ff;
  }
  .ant-menu-item:active,
  .ant-menu-submenu-title:active {
    background: #e6f7ff;
  }
  .ant-menu-item:hover {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
  }
}
/*侧边栏缩进之后icon的hover弹出的菜单栏字体颜色*/
.ant-menu-submenu-popup {
  .ant-menu-item > a {
    color: rgba(0, 0, 0, 0.65) !important;
  }
}
/*右击顶部菜单弹出的操作框样式修改*/
.ant-layout-content .ant-menu {
  background: #fff !important;
  color: rgba(0, 0, 0, 0.65) !important;
}
//给中各布局的中间内容部分设置内容超出滚动显示但是隐藏滚动条 ljl
/*.tablayout-content {
  $scrollBarSize: 10px;
  max-height: calc(100vh - 101px);
  overflow-y: scroll;
  !* 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*!
  &::-webkit-scrollbar {
    width: $scrollBarSize;
    height: $scrollBarSize;
    background-color: transparent;
    display: none;
  }

  & .-o-scrollbar {
    display: none;
  }
}*/
</style>